<script type="text/javascript" src="/themes/admin/assets/plugins/jquery-morris-chart/js/morris.min.js"></script>
<script type="text/javascript" src="/themes/admin/assets/plugins/highcharts/highcharts.js"></script>

<div class="row-fluid">
	<div class="grid simple">
		<div class="grid-title no-border">
            <h4>Morris <span class="semi-bold">Charts</span></h4>
            <div class="tools"> <a href="javascript:;" class="collapse"></a> <a href="#grid-config" data-toggle="modal" class="config"></a> <a href="javascript:;" class="reload"></a> <a href="javascript:;" class="remove"></a> </div>
		</div>
		<div class="grid-body no-border">
            <div class="row-fluid">
				<div class="span12">
					<h4>Morris <span class="semi-bold">Line Charts</span></h4>
					<p> Line graphs are probably the most widely used graph for showing trends.
						Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart. </p>
					<div id="highchart"> </div>
				</div>
            </div>
		</div>
	</div>
</div>
<script type="text/javascript">

	$(document).ready(function()
	{		
		$(function() {
			$('#highchart').highcharts({
				chart: {
					type: 'spline'
				},
				title: {
					text: 'Snow depth at Vikjafjellet, Norway'
				},
				subtitle: {
					text: 'Irregular time data in Highcharts JS'
				},
				xAxis: {
					type: 'datetime',
					dateTimeLabelFormats: {// don't display the dummy year
						month: '%e. %b',
						year: '%b'
					}
				},
				yAxis: {
					title: {
						text: 'Snow depth (m)'
					},
					min: 0
				},
				tooltip: {
					formatter: function() {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
					}
				},
				series: <?php echo $this->getChartData($id); ?>
			});
		});

	});
</script>